<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp"%>
<link rel="stylesheet" type="text/css" href="css/categoryPage.css">



<body>
<div class="header">
    <h1 id="myh1">欢迎光临宠物商店!</h1>
</div>

<div class="topnav">
    <!--跳转到目录下的网页。网页大体是一样的，只是展示的商品不一样-->
    <a href="welcome"  target="_self">首页</a>
    <a href="category?categoryId=cat"      id = "cat"      target="_self">猫猫</a>
    <a href="category?categoryId=dog"      id = "dog"      target="_self">狗狗</a>
    <a href="category?categoryId=bird"     id = bird       target="_self">鸟类</a>
    <a href="category?categoryId=pokemon"  id = "pokemon"  target="_self">宝可梦</a>
    <a href="category?categoryId=bugCat" id = "bugCat" target="_self">猫猫虫</a>
    <!--搜索框-->
    <form action="Search" method="post">
        <div class="searchDiv" id="searchDiv">
            <input type="text" name="searchName" placeholder="请输入想搜索的商品" style="float: left;outline: none;border-style:none; height: 43px;" id="searchName">
            <input type="submit" name="submitSearch" id="#" value="搜索" class="searchBtn">
            <div id="autoComplete" class="searchComp" style="top: 98px;">
                <li id="autoCompleteLi">
                </li>
            </div>
        </div>
    </form>
    <!--搜索框-->
    <c:if test="${sessionScope.username != null}">
        <a href="space" style="float: right;" target="_self">个人中心</a>
    </c:if>
    <c:if test="${sessionScope.username == null}">
        <a href="login" style="float: right;" target="_self">欢迎登录</a>
    </c:if>
    <a href="cart" style="float: right;" target="_self">购物车</a>
</div>

<div class="mainColumn" style="overflow-x: hidden;overflow-y: scroll;height: 87vh;">
    <div class="showBox">
        <div class="TitleStyle">
            <h1>搜索结果</h1>
        </div>
        <div class="TitleStyle">
            <c:if test="${sessionScope.searchResult.size()==0 || sessionScope.searchResult==null}">
                <h1>未搜索到相关结果</h1>
            </c:if>
            <c:if test="${sessionScope.searchResult.size()!=0}">
                <h1>挑选喜欢的宠物吧!</h1>
            </c:if>
        </div>


        <c:forEach var="product" items="${sessionScope.searchResult}">

            <div class="itemBox" style="float:left;" onclick='location.href=("Item?productId=${product.productId}&categoryId=${product.categoryId}")'>
                <div class="imgBox" >
                    <a href = "Item?productId=${product.productId}&categoryId=${product.categoryId}">
                        <img src="${product.description}" >
                    </a>
                </div>
                <div class="itemText">
                    <h1>${product.name}</h1>
                    <h4>价格:${product.price}元</h4>
                </div>
            </div>
        </c:forEach>

    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="javascripts/autoComplete.js"></script>
<script>
</script>
<%@include file="../common/bottom.jsp"%>
